
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8" />
      <title>GARMOR</title>
      <!-- don't forget to paste your page title! -->
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <meta name="description" content="" />
      <meta name="author" content="" />
      <!-- Le styles -->
      <!-- bootstrap framework styles -->
      <link href="css/bootstrap.css" rel="stylesheet" />
      <!-- fancybox lightbox clone plugin styles -->
      <link href="css/fancybox.css" rel="stylesheet" />
      <!-- icomoon icons font  -->
      <link href="css/icomoon.css" rel="stylesheet" />
      <!-- sequence slider styles -->
      <!--[if lt IE 8]>
      <link rel="stylesheet" type="text/css" media="screen" href="css/sequencejs_ie.css" />
      <![endif]-->
      <link rel="stylesheet" type="text/css" media="screen" href="css/sequencejs.css" />
      <!-- main template styles -->
      <link href="css/styles.css" rel="stylesheet" />
      <!-- place for your custom styles -->
      <link href="css/mystyle.css" rel="stylesheet" />
      <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
      <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
      <![endif]-->

   </head>
   <body class="">
      <!-- Backround image. Just paste yours. No extra code. Highly recommend to use your own images -->
      <!-- background images by Victor1558 under CC BY 2.0 license -> http://www.flickr.com/photos/76029035@N02/ -->
      <img src="img/site.jpg" id="bg_main" alt="" />
      <!--recommended image dimentions 1200x800px with weight under 120kb 
         !note! don't use very light images. It can damage readability of the white text -->
      <div class="container">
         <!-- Main navigation -->
         <div class="row">
            <div class="span12">
               <div class="navbar">
                  
               </div>
            </div>
         </div>
         <!-- /Main navigation -->
         <header class="page_title">
            <h1>Servicios</h1>
         </header>

         <section class="main">
            <!-- services area -->
            <div class="row">
           
               
                     <?php
                        mysql_connect("localhost", "root","") or
                              die("Could not connect: " . mysql_error());
                           mysql_select_db("Garmor");
                           
                     
                        
                        $query = mysql_query("SELECT * FROM services");
                        //$query->bind_param("ss",$password,$user);

                        $count = 1;

                        $p = array(5);
                        $image;

                        while($project =  mysql_fetch_array($query) ){
                           $p[0] = $project['id'];
                           $p[1] = $project['tittle'];
                           $p[2] = $project['text'];
                           $p[3] = $project['imageId'];
                           $p[4] = $project['page'];

                           $query1 = mysql_query("SELECT ImageName FROM images WHERE ImageId=".$p[3]);
                           $image = mysql_fetch_row($query1);

                           echo " 

                              <!-- service entry -->
                              <div class=\"span4 service\" >
                                 <span class=\"icomoon-cog\"></span>
                                 <div class=\"block\">
                                    <a href =\"".$p[4]."\" class=\"hover_image  block\" rel=\"example_group\" id = \"2\">
                                    <img src=\"img/".$image[0]."\" alt=\"\" />
                                    <span class=\"mask\"></span>
                                    
                                    <div class=\"box \">
                                       <span class=\"counter\">".$count."</span>
                                       <div class=\"inner\">
                                          <h5>\"".$p[1]."\"</h5>
                                          <p>\"".$p[2]."\"</p>
                                       </br>
                                       </div>
                                    </div>
                                    </a>
                                 </div> 
                              </div>";

                              $count++;

                        }
                        
                       

                       
                          // echo $p1[3].$p2[3].$p3[3]; die();

                           //echo $imagen1[0]."'".$imagen2[0].".".$imagen3[0]; die();
                      /* echo " 

               <!-- service entry -->
               <div class=\"span4 service\" >
                  <span class=\"icomoon-cog\"></span>
                  <div class=\"block\">
                     <a href =\"construction.html\" class=\"hover_image  block\" rel=\"example_group\" id = \"2\">
                     <img src=\"img/".$imagen1[0]."\" alt=\"\" />
                     <span class=\"mask\"></span>
                     
                     <div class=\"box \">
                        <span class=\"counter\">01</span>
                        <div class=\"inner\">
                           <h5>\".$p1[1].\"</h5>
                           <p>\".$p1[2].\"</p>
                        </br>
                        </div>
                     </div>
                     </a>
                  </div> 
               </div>



               <!-- service entry -->
               <div class=\"span4 service\" >
                  <span class=\"icomoon-cog\"></span>
                  <div class=\"block\">
                     <a href =\"construction.html\" class=\"hover_image  block\" rel=\"example_group\" id = \"2\">
                     <img src=\"img/".$imagen2[0]."\" alt=\"\" />
                     <span class=\"mask\"></span>
                     
                     <div class=\"box \">
                        <span class=\"counter\">02</span>
                        <div class=\"inner\">
                           <h5>\".$p2[1].\"</h5>
                           <p>\".$p2[2].\"</p>
                        </br>
                        </div>
                     </div>
                     </a>
                  </div> 
               </div>

               <!-- service entry -->
               <div class=\"span4 service\" >
                  <span class=\"icomoon-cog\"></span>
                  <div class=\"block\">
                     <a href =\"remodelation.html\" class=\"hover_image  block\" rel=\"example_group\" id = \"2\">
                     <img src=\"img/".$imagen3[0]."\" alt=\"\" />
                     <span class=\"mask\"></span>
                     
                     <div class=\"box \">
                        <span class=\"counter\">03</span>
                        <div class=\"inner\">
                           <h5>\".$p3[1].\"</h5>
                           <p>\".$p3[2].\"</p>
                        </br>
                        </div>
                     </div>
                     </a>
                  </div> ";*/
                  ?>
               </div>
            </div>
         </section>

         <section class="main">
            <!-- main footer -->
            <footer class="main">
               <div class="row">
                  <div class="span8">
                     <!-- footer main nav -->
                     <nav>
                        <ul>
                           <li><a href="index.html">Inicio</a></li>
                           <li><a href="projects.html">Proyectos</a></li>
                           <li><a href="clients.html">Clientes</a></li>
                           <li><a href="about.html">Nosotros</a></li>
                           <li><a href="services.html">Servicios</a></li>
                           <li><a href="contact.html">Contacto</a></li>
                        </ul>
                     </nav>
                  </div>
                  <div class="span4">
                     <small>Copyright © <a href="index.html">Edge</a> 2012</small>
                  </div>
               </div>
            </footer>
         </section>
      </div>
      <!-- /container --><!-- Le javascript
         ================================================== -->
      <!-- Placed at the end of the document so the pages load faster -->
      <script src="js/jquery.js"></script>
      <!-- Bootstrap Framework script -->
      <script src="js/bootstrap.js"></script>
      <!-- <script> $(function() { $('.carousel').carousel() }); </script> -->
      <script type="text/javascript">
         $("[rel=tooltip]").tooltip();
      </script>
      <!-- plugin for background images -->
     
      <!-- Fancybox plugin -->
      <script type="text/javascript" src="js/fancybox.js"></script>
      <script type="text/javascript" src="js/navbar.js"></script>
      
      <script type="text/javascript">
         $(document).ready(function() {
             

            /*
            *   Examples - images
            */
         
            $("a[rel=example_group]").fancybox({
               'padding' : '2',
               'overlayColor' : '#000',
               'overlayOpacity' : .9, 
               'autoDimensions' :false,
               'width': '460',
               'height': '900',
               'showNavArrows' : false,
               'centerOnScroll' : true,
               'autoScale' : true
         
            });
         
            
         });
      </script><!-- plugin for twitter displ4ay -> http://tweet.seaofclouds.com/ -->
      <!-- I am using envato twitter acount as the demo. Don't forget paste yours -->
      <script type="text/javascript" src="js/tweet.js"></script>
      
   </body>
</html>